 <template>
  <div class="custDetails">
    <!-- 新增房产信息 -->
    <el-dialog
      @closed="houseData = {}"
      title="新增房产"
      :visible.sync="dialogVisible2"
      width="60%"
    >
      <el-form
        ref="houseData"
        :model="houseData"
        :rules="houseData.mortgage == '1' ? rules : rules3"
        label-width="80px"
      >
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="房产地址" prop="address">
              <el-input
                v-model="houseData.address"
                placeholder="请输入内容"
                size="mini"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="不动产号" prop="cellNumber">
              <el-input
                v-model="houseData.cellNumber"
                placeholder="请输入内容"
                size="mini"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="建筑面积" prop="constructionArea">
              <el-input
                v-model="houseData.constructionArea"
                placeholder="请输入内容"
                size="mini"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="年代" prop="yearTime">
              <el-date-picker
                v-model="houseData.yearTime"
                type="year"
                size="mini"
                placeholder="选择年"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="房屋用途" prop="houseUse">
              <el-input
                v-model="houseData.houseUse"
                placeholder="请输入内容"
                size="mini"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="土地性质" prop="nature">
              <el-select
                clearable
                v-model="houseData.nature"
                placeholder="土地性质"
                size="mini"
              >
                <el-option label="出让" value="A"></el-option>
                <el-option label="划拨" value="B"></el-option>
                <el-option label="无国土证" value="C"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="所有方式" prop="ownership">
              <el-select
                clearable
                v-model="houseData.ownership"
                placeholder="所有方式"
                size="mini"
              >
                <el-option label="单独所有" value="A"></el-option>
                <el-option label="共同所有" value="B"></el-option>
                <el-option label="按份所有" value="C"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="估值(万元)" prop="valuation">
              <el-input
                v-model="houseData.valuation"
                placeholder="请输入内容"
                size="mini"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否抵押" prop="mortgage">
              <el-select
                clearable
                v-model="houseData.mortgage"
                placeholder="是否抵押"
                size="mini"
              >
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8" v-show="houseData.mortgage == '1' ? true : false">
            <el-form-item label="贷款银行" prop="loanBank">
              <el-input
                v-model="houseData.loanBank"
                placeholder="请输入内容"
                size="mini"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-show="houseData.mortgage == '1' ? true : false">
            <el-form-item label="欠款额" prop="mounts">
              <el-input
                v-model="houseData.mounts"
                placeholder="请输入内容"
                size="mini"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-show="houseData.mortgage == '1' ? true : false">
            <el-form-item label="到期时间" prop="endTime">
              <el-date-picker
                v-model="houseData.endTime"
                type="date"
                placeholder="选择日期"
                size="mini"
                class="date"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible2 = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="addHouse()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 修改房产信息 -->
    <el-dialog
      @closed="
        selData = {};
        houseData = {};
      "
      title="修改房产"
      :visible.sync="dialogVisible3"
      width="60%"
    >
      <el-form
        ref="houseData"
        :model="houseData"
        :rules="houseData.mortgage == '1' ? rules : rules3"
        label-width="80px"
      >
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="房产地址" prop="address">
              <el-input
                v-model="houseData.address"
                placeholder="请输入内容"
                size="mini"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="不动产号" prop="cellNumber">
              <el-input
                v-model="houseData.cellNumber"
                placeholder="请输入内容"
                size="mini"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="建筑面积" prop="constructionArea">
              <el-input
                v-model="houseData.constructionArea"
                placeholder="请输入内容"
                size="mini"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="年代" prop="yearTime">
              <el-date-picker
                v-model="houseData.yearTime"
                type="year"
                size="mini"
                placeholder="选择年"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="房屋用途" prop="houseUse">
              <el-input
                v-model="houseData.houseUse"
                placeholder="请输入内容"
                size="mini"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="土地性质" prop="nature">
              <el-select
                clearable
                v-model="houseData.nature"
                placeholder="土地性质"
                size="mini"
              >
                <el-option label="出让" value="A"></el-option>
                <el-option label="划拨" value="B"></el-option>
                <el-option label="无国土证" value="C"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="所有方式" prop="ownership">
              <el-select
                clearable
                v-model="houseData.ownership"
                placeholder="所有方式"
                size="mini"
              >
                <el-option label="单独所有" value="A"></el-option>
                <el-option label="共同所有" value="B"></el-option>
                <el-option label="按份所有" value="C"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="估值(万元)" prop="valuation">
              <el-input
                v-model="houseData.valuation"
                placeholder="请输入内容"
                size="mini"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否抵押" prop="mortgage">
              <el-select
                clearable
                v-model="houseData.mortgage"
                placeholder="是否抵押"
                size="mini"
              >
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8" v-show="houseData.mortgage == '1' ? true : false">
            <el-form-item label="贷款银行" prop="loanBank">
              <el-input
                v-model="houseData.loanBank"
                placeholder="请输入内容"
                size="mini"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-show="houseData.mortgage == '1' ? true : false">
            <el-form-item label="欠款额" prop="mounts">
              <el-input
                v-model="houseData.mounts"
                placeholder="请输入内容"
                size="mini"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-show="houseData.mortgage == '1' ? true : false">
            <el-form-item label="到期时间" prop="endTime">
              <el-date-picker
                v-model="houseData.endTime"
                type="date"
                placeholder="选择日期"
                size="mini"
                class="date"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible3 = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="updateHouse()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 资质勾选--新增房产信息 -->
    <el-dialog
      @closed="houseData = {}"
      title="新增房产"
      :visible.sync="dialogVisible4"
      width="60%"
    >
      <el-form
        ref="houseData"
        :model="houseData"
        :rules="houseData.mortgage == '1' ? rules : rules3"
        label-width="80px"
      >
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="房产地址" prop="address">
              <el-input
                v-model="houseData.address"
                placeholder="请输入内容"
                size="mini"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="不动产号" prop="cellNumber">
              <el-input
                v-model="houseData.cellNumber"
                placeholder="请输入内容"
                size="mini"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="建筑面积" prop="constructionArea">
              <el-input
                v-model="houseData.constructionArea"
                placeholder="请输入内容"
                size="mini"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="年代" prop="yearTime">
              <el-date-picker
                v-model="houseData.yearTime"
                type="year"
                size="mini"
                placeholder="选择年"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="房屋用途" prop="houseUse">
              <el-input
                v-model="houseData.houseUse"
                placeholder="请输入内容"
                size="mini"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="土地性质" prop="nature">
              <el-select
                clearable
                v-model="houseData.nature"
                placeholder="土地性质"
                size="mini"
              >
                <el-option label="出让" value="A"></el-option>
                <el-option label="划拨" value="B"></el-option>
                <el-option label="无国土证" value="C"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="所有方式" prop="ownership">
              <el-select
                clearable
                v-model="houseData.ownership"
                placeholder="所有方式"
                size="mini"
              >
                <el-option label="单独所有" value="A"></el-option>
                <el-option label="共同所有" value="B"></el-option>
                <el-option label="按份所有" value="C"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="估值(万元)" prop="valuation">
              <el-input
                v-model="houseData.valuation"
                placeholder="请输入内容"
                size="mini"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否抵押" prop="mortgage">
              <el-select
                clearable
                v-model="houseData.mortgage"
                placeholder="是否抵押"
                size="mini"
              >
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8" v-show="houseData.mortgage == '1' ? true : false">
            <el-form-item label="贷款银行" prop="loanBank">
              <el-input
                v-model="houseData.loanBank"
                placeholder="请输入内容"
                size="mini"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-show="houseData.mortgage == '1' ? true : false">
            <el-form-item label="欠款额" prop="mounts">
              <el-input
                v-model="houseData.mounts"
                placeholder="请输入内容"
                size="mini"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-show="houseData.mortgage == '1' ? true : false">
            <el-form-item label="到期时间" prop="endTime">
              <el-date-picker
                v-model="houseData.endTime"
                type="date"
                placeholder="选择日期"
                size="mini"
                class="date"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible4 = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="addHouse()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 呼出弹屏 -->
    <el-dialog
      class="telDialog"
      :close-on-click-modal="false"
      :show-close="false"
      title=""
      :visible.sync="centerDialogVisible"
      width="90%"
      center
      @closed="
        desc = '';
      "
    >
      <div class="telTop">
        <div class="Calling" v-if="telStatus">
          正在连接{{ customer.customerName }}...
        </div>
        <div class="onThePhone" v-else>
          通话中<span class="timeStr">{{ timeStr }}</span>
        </div>
        <el-button
          type="danger"
          v-if="!hangupStatus"
          size="mini"
          @click="hangup(currentTel)"
          >挂断</el-button
        >
        <div v-else>
          <el-button
            class="title_btn"
            type="primary"
            size="mini"
            v-if="$store.getters.returnBtnRole('新建签单')"
            @click="updateCust2('sign')"
            >签单</el-button
          >
          <el-button
            class="title_btn"
            type="primary"
            size="mini"
            v-if="$store.getters.returnBtnRole('新建计划')"
            @click="goPlan()"
            >计划</el-button
          >
          <el-button
            class="title_btn"
            type="primary"
            size="mini"
            @click="
              updateCust();
              lastConnectTime();
              onSubmit();
            "
            >保存</el-button
          >
        </div>
      </div>
      <div>
        <!-- 客户基本信息 -->
        <div class="middle">
          <!-- 信息内容 -->
          <div class="outBox">
            <el-form
              ref="detailsForm"
              :model="customer"
              :rules="customer.isTel == '0' ? rules2 : rules22"
              :inline="true"
              class="demo-form-inline"
              :disabled="isDisabled"
            >
              <h1>客户基本信息</h1>
              <el-form-item label="客户姓名" prop="customerName">
                <el-input
                  v-model="customer.customerName"
                  size="mini"
                ></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-select
                  clearable
                  size="mini"
                  v-model="customer.sex"
                  placeholder="请选择"
                >
                  <el-option label="男" value="1"></el-option>
                  <el-option label="女" value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="年龄">
                <el-input
                  v-model="calculationAge"
                  placeholder="请输入内容"
                  size="mini"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item label="身份证号" prop="idNumber">
                <el-input
                  v-model="customer.idNumber"
                  placeholder="请输入内容"
                  size="mini"
                ></el-input>
              </el-form-item>
              <el-form-item label="电话1" prop="tel1">
                <el-input
                  v-model="customer.tel1"
                  placeholder="请输入内容"
                  size="mini"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item label="贷款意向">
                <el-select
                  clearable
                  v-model="customer.loanInterest"
                  placeholder="请选择"
                  size="mini"
                >
                  <el-option label="房贷" value="A"></el-option>
                  <el-option label="信贷" value="B"></el-option>
                  <el-option label="顺位" value="C"></el-option>
                  <el-option label="经营贷" value="D"></el-option>
                  <el-option label="放大贷" value="F"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="客户等级">
                <el-select
                  clearable
                  v-model="customer.customerLevel"
                  placeholder="请选择"
                  size="mini"
                  :disabled="customer.customerLevel == 'F'"
                >
                  <el-option label="A" value="A"></el-option>
                  <el-option label="B" value="B"></el-option>
                  <el-option label="C" value="C"></el-option>
                  <el-option label="D" value="D"></el-option>
                  <el-option label="无等级" value="E"></el-option>
                  <el-option
                    label="签单"
                    value="F"
                    :disabled="true"
                  ></el-option>
                  <el-option label="非签单" value="G"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="婚姻状况">
                <el-select
                  clearable
                  size="mini"
                  v-model="customer.maritalStatus"
                  placeholder="请选择"
                >
                  <el-option label="已婚" value="A"></el-option>
                  <el-option label="未婚" value="B"></el-option>
                  <el-option label="离异" value="C"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="电话2" prop="tel2">
                <el-input
                :disabled="tel2Disabled"
                  v-model="customer.tel2"
                  placeholder="请输入内容"
                  size="mini"
                ></el-input>
              </el-form-item>
              <el-form-item label="意向金额" prop="intendedMount">
                <el-input
                  v-model="customer.intendedMount"
                  placeholder="请输入内容"
                  size="mini"
                ></el-input>
              </el-form-item>
              <el-form-item label="签单数">
                <el-input
                  v-model="customer.signNumber"
                  placeholder="请输入内容"
                  size="mini"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item label="计划数">
                <el-input
                  v-model="customer.plan"
                  placeholder="请输入内容"
                  size="mini"
                  disabled
                ></el-input>
              </el-form-item>

              <el-form-item label="首电反馈评级" prop="feedback">
                <el-select
                  clearable
                  v-model="customer.feedback"
                  placeholder="请选择"
                  size="mini"
                >
                  <el-option label="资质好" value="A"></el-option>
                  <el-option label="资质一般" value="B"></el-option>
                  <el-option label="资质差" value="C"></el-option>
                  <el-option label="未接" value="D"></el-option>
                  <el-option label="无意向" value="E"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="数据来源">
                <el-input
                  v-model="customer.dataFrom"
                  size="mini"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item label="所属人">
                <el-input
                  v-model="customer.ownerName"
                  size="mini"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item
                label="前台中心"
                v-if="$store.getters.returnBtnRole('前台中心')"
              >
                <el-input
                  size="mini"
                  v-model="customer.centerName"
                  disabled="disabled"
                  :aria-placeholder="customer.centerName"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="前台部门"
                v-if="$store.getters.returnBtnRole('前台部门')"
              >
                <el-input
                  size="mini"
                  v-model="customer.departmentName"
                  disabled="disabled"
                ></el-input>
              </el-form-item>
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item label="是否关注">
                    <el-switch
                      @change="isFocus"
                      v-model="customer.focusOn"
                      active-color="#13ce66"
                      inactive-color="#aaa"
                    >
                    </el-switch>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="是否意向">
                    <el-switch
                      @change="isInterest"
                      v-model="customer.intention"
                      active-color="#13ce66"
                      inactive-color="#aaa"
                    >
                    </el-switch>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="zihzi">
                  <el-form-item label="资质" class="checkBox">
                    <el-checkbox-group
                      size="mini"
                      v-model="customer.qualification"
                      @change="hasHouse"
                    >
                      <el-checkbox label="A">房子</el-checkbox>
                      <el-checkbox label="B">保单</el-checkbox>
                      <el-checkbox label="C">公积金</el-checkbox>
                      <el-checkbox label="D">营业执照</el-checkbox>
                      <el-checkbox label="F">车贷</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24" class="remarks">
                  <el-form-item label="客户备注">
                    <el-input
                      type="textarea"
                      :rows="7"
                      v-model="customer.remarks"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24" class="remarks telMarks">
                  <el-form-item label="通话备注">
                    <el-input type="textarea" v-model="desc"></el-input>
                    <!-- <el-button type="primary" @click="onSubmit" size="mini"
                      >提交通话备注</el-button
                    > -->
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
        <!-- 通话，房产-->
        <div class="bottom">
          <div class="numBox">
            <div class="selNumBox">
              <div class="num">{{ tel.total }}</div>
            </div>
            <div class="selNumBox">
              <div class="num">{{ house.total }}</div>
            </div>
            <div class="selNumBox">
              <div class="num">{{ plan.total }}</div>
            </div>
            <div class="selNumBox" v-if="$store.state.user.roleId == 1">
              <div class="num">{{ circulation.total }}</div>
            </div>
            <div class="selNumBox">
              <div class="num">{{ sign.total }}</div>
            </div>
          </div>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="通话信息" name="first">
              <div>
                <el-table
                  size="mini"
                  ref="multipleTable"
                  :data="tel.list"
                  tooltip-effect="dark"
                  style="width: 100%"
                  height="300"
                >
                <el-table-column
                    prop="customerManager"
                    label="拨打人"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="startStamp"
                    label="通话时间"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="duration"
                    label="通话时长"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="billsec"
                    label="通话计费时长(秒)"
                    show-overflow-tooltip
                  >
                  </el-table-column>

                  <el-table-column
                    prop="remarks"
                    label="通话备注"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                </el-table>
              </div>
              <!-- 分页 -->
              <div class="block">
                <el-pagination
                  small
                  @current-change="handleCurrentChange1"
                  :current-page="currentPage1"
                  :page-size="pageSize"
                  background
                  layout="total,prev, pager, next"
                  :total="tel.total"
                >
                </el-pagination>
              </div>
            </el-tab-pane>
            <el-tab-pane label="房产信息" name="second">
              <div class="btns_box">
                <el-button
                  class="btn"
                  type="primary"
                  size="mini"
                  @click="dialogVisible2 = true"
                  v-if="$store.getters.returnBtnRole('房产添加')"
                  >添加</el-button
                >
                <el-button
                  v-if="$store.getters.returnBtnRole('房产删除')"
                  @click="clickDelHouseBtn"
                  class="btn iconfont icon-shanchu"
                  type="danger"
                  size="mini"
                  title="批量删除"
                ></el-button>
              </div>
              <div>
                <el-table
                  size="mini"
                  ref="multipleTable"
                  :data="house.list"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @row-click="selectSel"
                  @selection-change="handleSelectionChange"
                  highlight-current-row
                  height="300"
                >
                  <el-table-column
                    fixed="left"
                    type="selection"
                    width="55"
                  ></el-table-column>
                  <el-table-column label="不动产号" width="120">
                    <template slot-scope="scope">{{
                      scope.row.cellNumber
                    }}</template>
                  </el-table-column>
                  <el-table-column label="房产地址" width="200">
                    <template slot-scope="scope">{{
                      scope.row.address
                    }}</template>
                  </el-table-column>
                  <el-table-column label="房屋用途" width="120">
                    <template slot-scope="scope">{{
                      scope.row.houseUse
                    }}</template>
                  </el-table-column>
                  <el-table-column label="建筑面积" width="120">
                    <template slot-scope="scope">{{
                      scope.row.constructionArea
                    }}</template>
                  </el-table-column>
                  <el-table-column label="年代" width="120">
                    <template slot-scope="scope">{{
                      scope.row.yearTime
                    }}</template>
                  </el-table-column>
                  <el-table-column label="估值(万元)" width="120">
                    <template slot-scope="scope">{{
                      scope.row.valuation
                    }}</template>
                  </el-table-column>
                  <el-table-column prop="nature" label="土地性质" width="120">
                    <template slot-scope="scope">
                      {{ scope.row.nature | nature }}
                    </template>
                  </el-table-column>
                  <el-table-column label="所有方式" width="120">
                    <template slot-scope="scope">
                      {{ scope.row.ownership | ownership }}
                    </template>
                  </el-table-column>
                  <el-table-column label="是否抵押" width="120">
                    <template slot-scope="scope">
                      {{ scope.row.mortgage | mortgage }}
                    </template>
                  </el-table-column>
                  <el-table-column label="贷款银行" width="120">
                    <template slot-scope="scope">{{
                      scope.row.loanBank
                    }}</template>
                  </el-table-column>
                  <el-table-column label="欠款额" width="120">
                    <template slot-scope="scope">{{
                      scope.row.mounts
                    }}</template>
                  </el-table-column>
                  <el-table-column label="到期时间" width="120">
                    <template slot-scope="scope">{{
                      $store.getters.timer(scope.row.endTime)
                    }}</template>
                  </el-table-column>
                  <el-table-column fixed="right" label="操作" width="120">
                    <template slot-scope="scope">
                      <el-button
                        class="btn"
                        type="primary"
                        size="mini"
                        @click="clickUpdateHouse(scope.row)"
                        title="修改"
                        v-if="$store.getters.returnBtnRole('房产修改')"
                        >修改</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
                <!-- 分页 -->
                <div class="block">
                  <el-pagination
                    small
                    @current-change="handleCurrentChange4"
                    :current-page="currentPage4"
                    :page-size="pageSize"
                    background
                    layout="total, prev, pager, next"
                    :total="house.total"
                  >
                  </el-pagination>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="计划信息" name="three">
              <div>
                <el-table
                  size="mini"
                  ref="multipleTable"
                  :data="plan.list"
                  tooltip-effect="dark"
                  style="width: 100%"
                  height="300"
                >
                  <el-table-column
                    prop="customerName"
                    label="客户姓名"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    label="计划时间"
                    width="160"
                  >
                   <template slot-scope="scope">
              {{ $store.getters.timer3(scope.row.compleTime) }}
            </template>
                  </el-table-column>
                  <el-table-column
                    prop="planName"
                    label="计划名称"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="planType"
                    label="计划类型"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">
                      {{ scope.row.planType | planType }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="planStatus"
                    label="计划状态"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">
                      {{ scope.row.planStatus | planStatus }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="planRemarks"
                    label="计划备注"
                    width="200"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="createdate"
                    label="创建时间"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">
                      {{ $store.getters.timer(scope.row.createdate) }}
                    </template>
                  </el-table-column>
                </el-table>
                <!-- 分页 -->
                <div class="block">
                  <el-pagination
                    small
                    @current-change="handleCurrentChange2"
                    :current-page="currentPage2"
                    :page-size="pageSize"
                    background
                    layout="total, prev, pager, next"
                    :total="plan.total"
                  >
                  </el-pagination>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane
              label="流转记录"
              name="four"
              v-if="$store.state.user.roleId == 1"
            >
              <div>
                <el-table
                  size="mini"
                  ref="multipleTable"
                  :data="circulation.list"
                  tooltip-effect="dark"
                  style="width: 100%"
                  height="300"
                >
                  <el-table-column
                    prop="transferMode"
                    label="转移方式"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">
                      {{ scope.row.transferMode | transferMode }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="transferTime"
                    label="转移时间"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">
                      {{ $store.getters.timer(scope.row.transferTime) }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="ownerName"
                    label="所属人姓名"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="oldOwnerName"
                    label="操作人姓名"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                </el-table>
                <!-- 分页 -->
                <div class="block">
                  <el-pagination
                    small
                    @current-change="handleCurrentChange3"
                    :current-page="currentPage3"
                    :page-size="pageSize"
                    background
                    layout="total, prev, pager, next"
                    :total="circulation.total"
                  >
                  </el-pagination>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="签单记录" name="five">
              <div>
                <el-table
                  size="mini"
                  ref="multipleTable"
                  :data="sign.list"
                  tooltip-effect="dark"
                  style="width: 100%"
                  height="300"
                >
                  <el-table-column
                    prop="contractNo"
                    label="协议编号"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="signStatus"
                    label="签单状态"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">
                      {{ scope.row.signStatus | signStatus }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="loanType"
                    label="贷款类型"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">
                      {{ scope.row.loanType | loanType }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="loanDemand"
                    label="贷款金额"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="deposit"
                    label="定金"
                    show-overflow-tooltip
                  >
                  </el-table-column>

                  <el-table-column
                    prop="remarks"
                    label="备注"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                </el-table>
                <!-- 分页 -->
                <div class="block">
                  <el-pagination
                    small
                    @current-change="handleCurrentChange5"
                    :current-page="currentPage5"
                    :page-size="pageSize"
                    background
                    layout="total, prev, pager, next"
                    :total="sign.total"
                  >
                  </el-pagination>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-dialog>
    <!-- 未知号码弹框 -->
    <el-dialog
      class="telDialog"
      :show-close="hangupStatus"
      :visible.sync="UnknownNumber"
      width="30%"
      @closed="
        hangupStatus = false;
        desc = '';
        $store.commit('CHANGEBTNSTATUS', false);
      "
    >
      <div class="telTop">
        <div class="Calling" v-if="telStatus">
          正在连接{{ customer.customerName }}...
        </div>
        <div class="onThePhone" v-else>
          通话中<span class="timeStr">{{ timeStr }}</span>
        </div>
        <el-button
          type="danger"
          v-if="!hangupStatus"
          size="mini"
          @click="hangup(currentTel)"
          >挂断</el-button
        >
      </div>
      <span>未知号码 {{ currentTel }}</span>
      <el-form label-width="70px" style="margin-top: 20px">
        <el-form-item label="通话备注" style="margin-bottom: 0px">
          <el-input type="textarea" v-model="desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit()"
            size="mini"
            v-if="hangupStatus"
            :disabled="$store.state.btnDisabled"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import Api2 from "@/http/apis/modules/uses.js";
import local from "@/utils/local.js";
import Api from "@/http/apis/modules/custManagement.js";
// import Api3 from "@/http/apis/modules/uses.js";
import Card from "@/components/Card.vue";
import { Message } from "element-ui";
import BackCust from "@/components/BackCust.vue";
import moment from "moment";
import Details from "@/views/layout/custManagement/CustDetails.vue";
// 正则表达式
import {
  isNull,
  checkNum2,
  checkPerId,
  checkPhone2,
  PERID_REG,
  checkFloat2,
  checkFloat,
  checkFloat4,
} from "@/config/reg.js";
export default {
  components: {
    Card,
    BackCust,
    Details,
  },
  data() {
    return {
      tel2Disabled:true,//tel2禁用状态
      desc: "", //通话备注
      taskId: null, //呼叫中心taskId
      isCenter: false, //中心展示
      isDepmart: false, //部门展示
      // 带入数据
      customerId: "",
      id: "",
      isDisabled: false, //输入框可编辑状态
      dataFrom: "",
      selData: {}, //修改选中单个
      //客户所有详情信息
      // 资质房产勾选判定
      houseChecked: false,
      customer: {
        intention: "",
        qualification: [],
        age: "",
        centerName: "",
        customerId: "",
        customerLevel: "",
        dataFrom: "",
        departmentName: "",
        feedback: "",
        focusOn: "",
        id: "",
        idNumber: "",
        intendedMount: "",
        loanInterest: "",
        maritalStatus: "",
        customerName: "",
        ownerName: "",
        plan: "",
        remarks: "",
        sex: "",
        signNumber: "",
        tel1: "",
        tel2: "",
      },
      house: {},
      tel: {},
      plan: {},
      circulation: {},
      sign: {},
      // 签单数
      // 计划数first
      value: "",
      custInfo: [], //客户信息
      activeName: "first", //底部标签页
      // 房产表格信息：可选择表格
      multipleSelection: [],
      // 新增/修改房产信息
      dialogVisible2: false, //新增
      dialogVisible3: false, //修改
      dialogVisible4: false, //资质新增
      houseData: {
        customerId: null,
        address: null,
        cellNumber: null,
        constructionArea: null,
        endTime: null,
        houseUse: null,
        id: "",
        loanBank: null,
        mortgage: null,
        mounts: null,
        nature: null,
        ownership: null,
        valuation: null,
        yearTime: null,
      },
      rules: {
        cellNumber: { required: true, validator: isNull, trigger: "blur" },
        constructionArea: { validator: checkFloat2, trigger: "blur" },
        loanBank: { required: true, validator: isNull, trigger: "blur" },
        mortgage: { validator: isNull, trigger: "blur" },
        mounts: { required: true, validator: checkFloat, trigger: "blur" },
        endTime: { required: true, validator: isNull, trigger: "blur" },
      },
      rules3: {
        cellNumber: { required: true, validator: isNull, trigger: "blur" },
        constructionArea: { validator: checkFloat2, trigger: "blur" },
      },
      //修改详情验证//首电
      rules2: {
        tel2: { validator: checkNum2, trigger: "blur" },
        idNumber: { validator: checkPerId, trigger: "blur" },
        intendedMount: { validator: checkFloat4, trigger: "blur" },
        feedback: { required: true, validator: isNull, trigger: "blur" },
      },
      //非首电
      rules22: {
        tel2: { validator: checkNum2, trigger: "blur" },
        idNumber: { validator: checkPerId, trigger: "blur" },
        intendedMount: { validator: checkFloat4, trigger: "blur" },
      },
      // 控制删除
      isDelBtn: false,
      delHouse: [],
      // 呼出弹框
      telMask: false,
      centerDialogVisible: false,
      currentTel: "",
      telStatus: true, //通话状态
      timeStr: "00:00:00",
      timer: null, //定时器
      hangupStatus: false, //关闭按钮状态
      UnknownNumber: false, //未知号码弹框
      //判断是否有此号码
      hasPhone: 1,
      // 分页
      pageSize: 10,
      // 电话
      currentPage1: 1,
      // 计划
      currentPage2: 1,
      // 流转
      currentPage3: 1,
      // 房产
      currentPage4: 1,
      // 签单
      currentPage5: 1,
    };
  },
  methods: {
    // 通话备注
    onSubmit() {
      this.$store.commit("CHANGEBTNSTATUS", true);
      let data = {
        userId: this.$store.state.user.userId,
        callerIdNumber: this.$store.state.user.seatsId,
        customerPhone: this.currentTel,
        remarks: this.desc,
        taskId: this.taskId,
      };
      let timeOut = setTimeout(async () => {
        let re = await Api2.telMasket_Api(data);
        let { code, msg } = re.data;
        if (code == "SUCCESS") {
          console.log("通话备注保存成功");
          clearTimeout(timeOut);
        } else {
          Message.error("通话备注保存失败");
          clearTimeout(timeOut);
        }
        this.$store.commit("CHANGEBTNSTATUS", false);
      }, 3000);
    },
    // // 挂断电话
    hangup(phone) {
      let _this = this;
      console.log("挂断号码", phone);
      // 如果当前通话为监听，三方，等等第三方操作，则参数为true，正常挂断为false
      var isThird = false;
      // 自定义请求挂断返回处理方法（可选）
      var handler = {
        oncomplete(e) {
          console.log("挂断请求成功" + e);
          // this.hangupStatus = true;
        },
        onerror(e) {
          console.log("挂断请求失败" + e);
        },
      };
      xl_seat.xlClient.hangup(phone, isThird, handler);
    },
    // 计时器
    start() {
      this.telStatus = false;
      let time = 0;
      this.timer = setInterval(() => {
        time += 1;
        let h = 0,
          m = 0,
          s = 0;
        h = Math.floor(time / 3600);
        m = parseInt((time % 3600) / 60);
        s = time % 60;
        if (h < 9) {
          h = "0" + h;
        }
        if (m < 9) {
          m = "0" + m;
        }
        if (s < 9) {
          s = "0" + s;
        }
        this.timeStr = `${h}:${m}:${s}`;
      }, 1000);
    },
    stop() {
      this.hangupStatus = true;
      clearInterval(this.timer);
    },
    ///////////////////////////////////////////////////////////////////
    // 获取客户详情
    async getCustDetails(val) {
      let re = await Api.getCustByTelApi({
        tel1: this.customer.tel1,
        ownerId: this.$store.state.user.userId,
        seatsId: this.$store.state.user.seatsId,
        pageEntry: {
          pageNumber: val ? val : 1, //当前页码
          pageSize: 1, //当前页码多少条
        },
      });
      let { data } = re.data.result;
      data.sex = data.sex == 0 ? "0" : "1"; //处理性别字段
      data.focusOn = data.focusOn == 0 || data.focusOn === null ? false : true; //处理关注字段
      data.intention =
        data.intention == 0 || data.intention === null ? false : true; //处理意向字段
      data.qualification =
        data.qualification == null || data.qualification == ""
          ? []
          : data.qualification.toString().split(",");
      this.customer = data;
      this.customer.centerName = this.$store.state.depart.parentDepartmentName;
      this.customer.departmentName = this.$store.state.depart.departmentName;
      // 登录着不是所属人，电话加密
      // if (this.customer.ownerId != this.$store.state.user.userId) {
      //   this.customer.tel1 = this.custTel(this.customer.tel1);
      //   this.customer.tel2 = this.custTel(this.customer.tel2);
      // }
      this.dataFrom = data.dataFrom; // 信息来源
      //可编辑状态
      if (this.customer.ownerId != this.$store.state.user.userId) {
        this.isDisabled = true;
      }
      this.tel2IsEidit();
    },
    // 电话2能否修改
    async tel2IsEidit() {
      let re = await Api.tel2IsEidit({
        customerId: this.customer.customerId,
      });
      if (re.data.code == "SUCCESS") {
        this.tel2Disabled = !re.data.result;
      } else {
      }
    },
    // 详情电话
    async getTel() {
      let data = {
        tel1: this.customer.tel1,
        ownerId: this.$store.state.user.userId,
        seatsId: this.$store.state.user.seatsId,
        pageEntry: {
          pageNumber: this.currentPage1, //当前页码
          pageSize: this.pageSize, //当前页码多少条
        },
      };
      let re = await Api.getDetailTelApi(data);
       if (re.data.code == "SUCCESS") {
        this.tel = re.data.result.planTelMsgTos;
      }else{
        this.tel.list=[]
        this.tel.total=0
      }
    },
    handleCurrentChange1(val) {
      this.currentPage1 = val;
      this.getTel();
    },
    // 详情计划
    async getPlan() {
      let data = {
        tel1: this.customer.tel1,
        ownerId: this.$store.state.user.userId,
        seatsId: this.$store.state.user.seatsId,
        pageEntry: {
          pageNumber: this.currentPage2, //当前页码
          pageSize: this.pageSize, //当前页码多少条
        },
      };
      let re = await Api.getDetailPlanApi(data);
      if (re.data.code == "SUCCESS") {
        this.plan = re.data.result.plan;
      }else{
        this.plan.list=[]
        this.plan.total=0
      }
    },
    handleCurrentChange2(val) {
      this.currentPage2 = val;
      this.getPlan();
    },
    // 详情流转
    async getCir() {
      let data = {
        tel1: this.customer.tel1,
        ownerId: this.$store.state.user.userId,
        seatsId: this.$store.state.user.seatsId,
        pageEntry: {
          pageNumber: this.currentPage3, //当前页码
          pageSize: this.pageSize, //当前页码多少条
        },
      };
      let re = await Api.getDetailCirApi(data);
      if (re.data.code == "SUCCESS") {
        this.circulation = re.data.result.circulation;
      }else{
        this.circulation.list=[]
        this.circulation.total=0
      }
    },
    handleCurrentChange3(val) {
      this.currentPage3 = val;
      this.getCir();
    },
    // 详情房产
    async getHouse() {
      let data = {
        tel1: this.customer.tel1,
        ownerId: this.$store.state.user.userId,
        seatsId: this.$store.state.user.seatsId,
        pageEntry: {
          pageNumber: this.currentPage4, //当前页码
          pageSize: this.pageSize, //当前页码多少条
        },
      };
      let re = await Api.getDetailHouseApi(data);
       if (re.data.code == "SUCCESS") {
        this.house = re.data.result.house;
      }else{
        this.house.list=[]
        this.house.total=0
      }
    },
    handleCurrentChange4(val) {
      this.currentPage4 = val;
      this.getHouse();
    },
    // 详情签单
    async getDetailSign() {
      let data = {
        tel1: this.customer.tel1,
        customerId: this.customer.customerId,
        ownerId: this.$store.state.user.userId,
        seatsId: this.$store.state.user.seatsId,
        pageEntry: {
          pageNumber: this.currentPage5, //当前页码
          pageSize: this.pageSize, //当前页码多少条
        },
      };
      let re = await Api.getDetailSignApi(data);
      if (re.data.code == "SUCCESS") {
        this.sign = re.data.result.sign;
      }else{
        this.sign.list=[]
        this.sign.total=0
      }
    },
    handleCurrentChange5(val) {
      this.currentPage5 = val;
      this.getDetailSign();
    },
    // 点击关注
    async isFocus() {
      let re = await Api.isFocusApi({
        customerId: this.customer.customerId,
        focusOn: this.customer.focusOn == true ? 1 : 0, //1已关注，0未关注
        ownerId: this.customer.ownerId,
      });
      let { code, msg } = re.data;
      if (code === "SUCCESS") {
        Message({
          type: "success",
          message: msg,
        });
      } else {
        Message.error(msg);
      }
    },
    // 点击意向
    async isInterest() {
      let re = await Api.isInterestApi({
        customerId: this.customer.customerId,
        intention: this.customer.intention == true ? 1 : 0, //1已关注，0未关注
        ownerId: this.customer.ownerId,
      });
      let { code, msg } = re.data;
      if (code === "SUCCESS") {
        Message({
          type: "success",
          message: msg,
        });
      } else {
        Message.error(msg);
      }
    },
    // 修改客户详情
    updateCust() {
      this.hangupStatus = false;
      let data = {
        customerId: this.customer.customerId,
        ownerId: this.customer.ownerId,
        isUnread: 1, //点击保存改为1
        customerLevel: this.customer.customerLevel,
        idNumber: this.customer.idNumber,
        intendedMount: this.customer.intendedMount,
        loanInterest: this.customer.loanInterest,
        maritalStatus: this.customer.maritalStatus,
        customerName: this.customer.customerName,
        ownerName: this.customer.ownerName,
        qualification: this.customer.qualification.join(","),
        remarks: this.customer.remarks,
        tel2: this.customer.tel2,
        feedback: this.customer.feedback,
        sex: this.customer.sex,
      };
      this.$refs.detailsForm.validate(async (valid) => {
        if (valid) {
          let re = await Api.updateCustomerApi(data);
          let { code, msg } = re.data;
          if (code === "SUCCESS") {
            Message({
              type: "success",
              message: msg,
            });
              this.$bus.$emit('updateDetails', '111');
            // this.getCustDetails();
            this.centerDialogVisible = false;
            this.$bus.$off("updateDetails");
          } else {
            Message.error(msg);
          }
        }
      });
    },
    // 修改客户详情---->跳转页面用
    updateCust2(url) {
      this.lastConnectTime();
      this.onSubmit();
      let data = {
        customerId: this.customer.customerId,
        ownerId: this.customer.ownerId,
        isUnread: 1, //点击保存改为1
        customerLevel: this.customer.customerLevel,
        idNumber: this.customer.idNumber,
        intendedMount: this.customer.intendedMount,
        loanInterest: this.customer.loanInterest,
        maritalStatus: this.customer.maritalStatus,
        customerName: this.customer.customerName,
        ownerName: this.customer.ownerName,
        qualification: this.customer.qualification.join(","),
        remarks: this.customer.remarks,
        tel2: this.customer.tel2,
        feedback: this.customer.feedback,
        sex: this.customer.sex,
      };
      this.$refs.detailsForm.validate(async (valid) => {
        if (valid) {
          let re = await Api.updateCustomerApi(data);
          let { code, msg } = re.data;
          if (code === "SUCCESS") {
            if (url == "sign") {
              this.goSign();
            } else if (url == "plan") {
              this.centerDialogVisible = false;
              this.hangupStatus = false;
              this.$router.push({
                path: "/custManagement/createPlan",
                query: {
                  customerId: this.customerId,
                  ownerId: this.ownerId,
                  backPath: "/custManagement/CustList",
                },
              });
            }
          } else {
            Message.error(msg);
          }
        }
      });
    },
    // 新建签单
    goSign() {
      if (PERID_REG.test(this.customer.idNumber)) {
        this.centerDialogVisible = false;
        this.hangupStatus = false;
        this.$router.push({
          path: "/custManagement/createSign",
          query: {
            customerId: this.customer.customerId,
            ownerId: this.customer.ownerId,
            backPath: "/custManagement/CustList",
          },
        });
      } else {
        Message.error("无身份证号");
      }
    },
    //新建计划
    goPlan() {
      if (this.customer.ownerId == this.$store.state.user.userId) {
        this.updateCust2("plan");
      } else {
        this.centerDialogVisible = false;
        this.hangupStatus = false;
        this.$router.push({
          path: "/custManagement/createPlan",
          query: {
            customerId: this.customer.customerId,
            ownerId: this.customer.ownerId,
            backPath: "/custManagement/CustList",
          },
        });
      }
    },
    // 底部标签页切换
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // 删除房产数据
      let delHouse = [];
      let sel = {};
      val.forEach((item) => {
        sel.customerId = this.customer.customerId;
        sel.id = item.id;
        delHouse.push(sel);
        sel = {};
      });
      this.delHouse = delHouse;
      console.log(this.delHouse);
    },
    // 选中单行
    selectSel(row, event, column) {
      this.selData = row;
      this.houseData = row;
    },
    // 勾选房产房子填写
    hasHouse() {
      console.log(this.customer.qualification.join(","));
      // if (
      //   this.house.list.length == 0 &&
      //   this.customer.qualification.includes("A")
      // ) {
      //   this.dialogVisible4 = true;
      //   let index = this.customer.qualification.indexOf("A");
      //   this.customer.qualification.splice(index, 1);
      // } else if (
      //   //房子选项不能取消
      //   this.house.list.length != 0 &&
      //   this.customer.qualification.indexOf("A") == -1
      // ) {
      //   this.customer.qualification.push("A");
      // }
    },
    //新增房产信息
    async addHouse(formName) {
      this.$refs.houseData.validate(async (valid) => {
        this.houseData.customerId = this.customer.customerId;
        if (this.houseData.endTime != null) {
          this.houseData.endTime = moment(this.houseData.endTime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        }
        if (this.houseData.yearTime != null) {
          this.houseData.yearTime = moment(this.houseData.yearTime).format(
            "YYYY"
          );
        }
        if (valid) {
          let re = await Api.addHouseApi(this.houseData);
          let { code, msg } = re.data;
          if (code === "SUCCESS") {
            Message({
              type: "success",
              message: msg,
            });
            this.customer.qualification.push("A");
            this.dialogVisible2 = false;
            this.dialogVisible4 = false;
            this.getHouse();
          } else {
            Message.error(msg);
          }
        } else {
          return;
        }
      });
    },
    //点击修改按钮
    clickUpdateHouse(row) {
      this.houseData = row;
      this.dialogVisible3 = true;
    },
    //确认修改房产信息
    async updateHouse(formName) {
      this.$refs.houseData.validate(async (valid) => {
        if (this.houseData.endTime != null) {
          this.houseData.endTime = moment(this.houseData.endTime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        }
        if (this.houseData.yearTime != null) {
          this.houseData.yearTime = moment(this.houseData.yearTime).format(
            "YYYY"
          );
        }
        if (this.houseData.mortgage == "0") {
          this.houseData.loanBank = "";
          this.houseData.mounts = "";
        }
        if (valid) {
          let re = await Api.upDateHouseApi(this.houseData);
          let { code, msg } = re.data;
          if (code === "SUCCESS") {
            Message({
              type: "success",
              message: msg,
            });
            this.dialogVisible3 = false;
            this.getHouse();
          } else {
            Message.error(msg);
          }
        } else {
          return;
        }
      });
    },
    // 点击确认删除
    clickDelHouseBtn() {
      if (this.delHouse.length == 0) {
        Message.error("请选择数据！");
      } else {
        this.open();
      }
    },
    // 删除房产
    async delHouseInfo() {
      this.isDelBtn = false;
      let re = await Api.delHouseApi(this.delHouse);
      let { code, msg } = re.data;
      if (code === "SUCCESS") {
        Message({
          type: "success",
          message: msg,
        });
        this.getHouse();
        this.getCustDetails();
      } else {
        Message.error(msg);
      }
    },
    //确认删除弹框
    open() {
      this.$alert("是否确认删除", "", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            this.delHouseInfo();
          }
        },
      });
    },
    custTel(tel1) {
      if (tel1) {
        if (tel1.length == 11 || tel1.length > 11) {
          return tel1.substring(3, 0) + "****" + tel1.substring(7);
        } else if (tel1.length > 0 && tel1.length < 11) {
          return tel1.substring(3, 0) + "****" + tel1.substring(7);
        } else if (tel1.length == 0) {
          return tel1;
        }
      } else {
        return tel1;
      }
    },
    // 获取传入客户信息
    getBeFore() {
      this.$bus.$on("callCustDetails", (data) => {
        if (data.length == 4) {
          this.centerDialogVisible = data[0];
          this.currentTel = data[1];
          // 电话加密
          // if (
          //   data[2].data.ownerName != thiss.$store.state.user.userName
          // ) {
          //   data[2].data.tel1 = this.custTel(data[2].data.tel1);
          //   data[2].data.tel2 = this.custTel(data[2].data.tel2);
          // }
          data[2].data.sex = data[2].data.sex == 0 ? "0" : "1"; //处理性别字段
          data[2].data.focusOn =
            data[2].data.focusOn == 0 || data[2].data.focusOn === null
              ? false
              : true; //处理关注字段
          data[2].data.qualification =
            data[2].data.qualification == null ||
            data[2].data.qualification == ""
              ? []
              : data[2].data.qualification.toString().split(","); //处理资质
          this.customer = data[2].data; //客户资料
          let zizhi = data[2].data.qualification;
          console.log("资质", this.customer.qualification);
          this.taskId = data[3];
          // //加载中心，部门
          this.id = data[2].data.id;
          this.customerId = data[2].data.customerId;
          this.tel2IsEidit();
          this.getTel();
          this.getPlan();
          this.getCir();
          this.getHouse();
          this.getDetailSign();
          this.lastContactTime();
        } else {
          this.hasPhone = 0;
          this.UnknownNumber = data[0];
          this.currentTel = data[1];
          this.taskId = data[2];
        }
      });
    },
    // 最后联系时间
    async lastContactTime() {
      let data = {
        tel1: this.customer.tel1,
        customerId: this.customer.customerId,
      };
      let re = await Api.lastContactTimeApi(data);
    },
    //最后接通时间
    async lastConnectTime() {
      let data = {
        tel1: this.customer.tel1,
        customerId: this.customer.customerId,
      };
      let re = await Api.lastConnectTimeApi(data);
    },
  },
  created() {
    this.getBeFore();
  },
  computed: {
    // // 计算性别
    // changeSex: function () {
    //   let sex = "";
    //   if (this.customer.idNumber && this.customer.idNumber != null) {
    //     if (this.customer.idNumber.length == 15) {
    //       if (this.customer.idNumber.substr(13, 1) % 2 == 0) {
    //         sex = "女";
    //       } else {
    //         sex = "男";
    //       }
    //     }
    //     if (this.customer.idNumber.length == 18) {
    //       if (this.customer.idNumber.substr(16, 1) % 2 == 0) {
    //         sex = "女";
    //       } else {
    //         sex = "男";
    //       }
    //     }
    //   }
    //   return sex;
    // },
    // 计算年龄
    calculationAge() {
      var len = (this.customer.idNumber + "").length;
      if (len == 0) {
        return 0;
      } else {
        if (len != 15 && len != 18) {
          return 0;
        }
      }
      var strBirthday = "";
      if (len == 18) {
        strBirthday =
          this.customer.idNumber.substr(6, 4) +
          "/" +
          this.customer.idNumber.substr(10, 2) +
          "/" +
          this.customer.idNumber.substr(12, 2);
      }
      if (len == 15) {
        strBirthday =
          "19" +
          this.customer.idNumber.substr(6, 2) +
          "/" +
          this.customer.idNumber.substr(8, 2) +
          "/" +
          this.customer.idNumber.substr(10, 2);
      }
      //时间字符串里，必须是“/”
      var birthDate = new Date(strBirthday);
      var nowDateTime = new Date();
      var age = nowDateTime.getFullYear() - birthDate.getFullYear();
      //再考虑月、天的因素;.getMonth()获取的是从0开始的，这里进行比较，不需要加1
      if (
        nowDateTime.getMonth() < birthDate.getMonth() ||
        (nowDateTime.getMonth() == birthDate.getMonth() &&
          nowDateTime.getDate() < birthDate.getDate())
      ) {
        age--;
      }
      return age;
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.el-date-editor.el-input {
  width: 100%;
}
.custDetails {
  /deep/.el-card__header {
    padding: 0;
  }
  // 顶部按钮
  .top {
    height: 50px;
    display: flex;
    justify-content: space-between;
  }
  // 中间表单
  .middle {
    /deep/.el-form {
      .el-form-item:not(.remarkBox) {
        position: relative;
        margin-bottom: 10px;
        width: 22%;
        // 电话图标
        .icon-dianhua {
          position: absolute;
          top: 2px;
          right: -22px;
          color: green;
        }
        .el-form-item__content {
          width: 62%;
          input {
            width: 100% !important;
          }
        }
      }
      // 关注、意向
      .el-col .el-form-item {
        display: block;
        width: 100%;
        .el-form-item__label {
          width: 30%;
        }
        .el-form-item__content {
          width: 60%;
          .el-input {
            width: 60%;
          }
        }
      }
    }
    //外部盒子
    .outBox {
      position: relative;
      border-radius: 5px;
      box-shadow: 0px 2px 15px -5px #aaa;
      padding-bottom: 20px;
      margin-bottom: 40px;
      padding: 30px 10px 20px 10px;
      h1 {
        position: absolute;
        top: -11px;
        left: 16px;
        font-size: 18px;
        font-weight: 600;
      }
      .switch {
        position: absolute;
        top: 0px;
        right: 10px;
      }
    }
    // 复选框
    /deep/.checkBox {
      width: 100% !important;
      text-align: left;
      .el-form-item__label {
        width: 10% !important;
        text-align: left;
      }
      .el-form-item__content {
        width: 74% !important;
        input {
          width: 100% !important;
        }
      }
    }
    /deep/.el-checkbox {
      margin-right: 8px;
      .el-checkbox__label {
        padding-left: 5px;
      }
    }
  }
  /deep/.bottom {
    position: relative;
    // 数字头标
    .numBox {
      position: absolute;
      top: -2px;
      left: -33px;
      width: 416px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .selNumBox {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        text-align: right;
        position: relative;
        .num {
          font-size: 12px;
          text-align: center;
          line-height: 20px;
          color: #f00;
          font-weight: 600;
        }
      }
    }
    margin-top: 20px;
    margin-bottom: 50px;
    .btns_box {
      display: flex;
      justify-content: flex-end;
      padding-bottom: 5px;
    }
    .el-table th {
      background-color: rgb(231, 232, 233);
    }
    .el-table .warning-row {
      background: rgba(241, 241, 241, 0.863);
    }
    //标签
    .el-tabs__item {
      font-size: 16px;
      font-weight: 600;
    }
  }
}
// 图标
.iconfont:hover {
  cursor: pointer;
}
/deep/.telDialog {
  .telTop {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  margin-top: 0vh !important;
  .outBox {
    margin-bottom: 0px !important;
  }
  .el-dialog__body {
    padding-top: 5px;
  }
  .Calling {
    text-align: center;
    color: #f00;
  }
  .onThePhone {
    text-align: center;
    color: #f00;
    span {
      color: #aaa;
      font-size: 12px;
      margin-left: 10px;
    }
  }
}
/deep/.el-form-item__label {
  width: 28%;
}
//备注
/deep/.remarks {
  .el-form-item {
    width: 100%;
    .el-form-item__label {
      width: 7% !important;
    }
    .el-form-item__content {
      width: 82% !important;
    }
  }
}
/deep/.telMarks {
  textarea {
    border-color: #f00;
  }
}
// 计划签单保存
.title_btn {
  margin-left: 5px;
}
</style>
